<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>随手拍</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link href="../../css/life_housekeeper/snapshot_index.css" rel="stylesheet" />
		<script src="../../js/fontset.js"></script>
		<script src="../../js/statistics.js"></script>
 
</head>
<body>
	<div class="mui-content">
		<div class=" mui-scroll-wrapper" id="container">
			<div class="mui-scroll ">
				<div class="container">
					<div class="waterfall waterfall-left">
				        
				    </div>
				    <div class="waterfall waterfall-right">
				     
					</div>
				</div>
			</div>         
		</div>
		
		<a class="add" href="javascript:;">
			<img src="../../images/icon/life_housekeeper/icon-add.png"/>
		</a>
		<div class="layer mui-hidden" id="popover">
			<div class="popover">
				<div class="popover-item" id="feedback" data-href="snapshot-feedback.html">
					<div class="item-img-box">
						<img src="../../images/icon/life_housekeeper/icon-cg.png"/>
					</div>
					<span>反馈问题</span>
				</div>
				<div class="popover-item" id="release" data-href="snapshot-release.html">
					<div class="item-img-box">
						<img src="../../images/icon/life_housekeeper/icon-mj.png"/>
					</div>
					<span>发布美景</span>
				</div>
				<div class="popover-item" id="close">
					<div class="item-img-box">
						<img src="../../images/icon/life_housekeeper/icon-close1.png"/>
					</div>
				</div>
			</div>
		</div>
		
	</div>       
</body>
<script src="../../plugins/jquery/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../plugins/mui/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js" ></script>
<script src="../../plugins/template/template.js"></script>
<script src="../../js/life_housekeeper/windowTitleView.js"></script>
<script type="text/html" id="leftTpl">
	{{each data as item i}}
	{{if (i+1)%2 == 1}}
	<div class="item" data-id="{{item.id}}">
    	<div class="img-box">
    		<img src="{{baseUrl}}{{item.img}}">
    		{{if item.praise}}
    		{{if item.userPraise == 1}}
    		<div class="item-like item-like-box">
    		{{else}}
    		<div class="item-dislike item-like-box">
    		{{/if}}		
				<i class="icon"></i>
				{{item.praise}}
    		</div>
    		{{/if}}
    	</div>
        <div class="item-tab">
        	<div class="item-ads mui-ellipsis">
            	<i class="icon icon-address"></i>
            	{{item.address}}
            </div>
            <p class="item-time mui-text-right mui-ellipsis">{{item.create_time}}</p>
        </div>   
    </div>
    {{/if}}
    {{/each}}
</script>
<script type="text/html" id="rightTpl">
	{{each data as item i}}
	{{if (i+1)%2 == 0}}
	<div class="item" data-id="{{item.id}}">
    	<div class="img-box">
    		<img src="{{baseUrl}}{{item.img}}">
    		{{if item.praise}}
    		{{if item.userPraise == 1}}
    		<div class="item-like item-like-box">
    		{{else}}
    		<div class="item-dislike item-like-box">
    		{{/if}}		
				<i class="icon"></i>
				{{item.praise}}
    		</div>
    		{{/if}}
    	</div>
        <div class="item-tab">
        	<div class="item-ads mui-ellipsis">
            	<i class="icon icon-address"></i>
            	{{item.address}}
            </div>
            <p class="item-time mui-text-right mui-ellipsis">{{item.create_time}}</p>
        </div>   
    </div>
    {{/if}}
    {{/each}}
</script>
<script type="text/javascript">
	mui.init({
	  	pullRefresh : {
	    	container:'#container',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
	    	up : {
		      	contentrefresh : "正在加载...",
		     	contentnomore:'没有更多数据了',
		     	callback : pullupRefresh
	    	}
	  	}
	});
	function pullupRefresh(){
		var _this= this,
		len = $('.container .item').length;
		//console.log('length:'+len);
		if(len < 6){
			mui('#container').pullRefresh().disablePullupToRefresh();
			return;
		}
		myAjax('home/snapshot/getMore','post',{length:len+''},function(e){
			//console.log(e);
			e = JSON.parse(e);
			if(e.code == '1'){
				e.baseUrl = _baseUrl;
			var	leftHtml = template('leftTpl',e),
				rightHtml = template('rightTpl',e);
				$('.waterfall-left').append(leftHtml);
				$('.waterfall-right').append(rightHtml);
				mui('#container').pullRefresh().endPullupToRefresh(e.data.length < 6);
			}else{
				mui('#container').pullRefresh().endPullupToRefresh(true);
			}
		})
	}
	mui.plusReady(function(){
		var userId = plus.storage.getItem('cg_user_id');
		myAjax('home/snapshot/index','post',{userid:userId},function(e){
			e = JSON.parse(e);
			console.log(JSON.stringify(e));
			if(e.code == '1'){
				e.baseUrl = _baseUrl;
			var	leftHtml = template('leftTpl',e),
				rightHtml = template('rightTpl',e);
				$('.waterfall-left').append(leftHtml);
				$('.waterfall-right').append(rightHtml);
				if(e.data.length < 6){
					mui('#container').pullRefresh().disablePullupToRefresh();
				}
			}else{
				mui('#container').pullRefresh().disablePullupToRefresh();
			}
		});
		var add = document.querySelectorAll('.add')[0],
		popover = document.getElementById("popover");
		add.addEventListener('tap',function(e){
			this.classList.add('mui-hidden');
			popover.classList.remove('mui-hidden');
		},false);
		mui("#container").on('tap','.item',function(){
			var _this = this,
				id = _this.getAttribute('data-id');
			if(id){
				var viewOptions = {
					url:'snapshot-detail.html',
					id:'snapshot-detail.html'
					},
				extra = {
					pageId:id,
					userId:userId
				};
				mui.addTitleView(viewOptions,extra);
			}
		});
		mui('#popover').on('tap','.popover-item',function(){
			var _this = this;
			href = _this.getAttribute('data-href');
			add.classList.remove('mui-hidden');
			popover.classList.add('mui-hidden');
			if(href){
				var viewOptions = {
					url:href.trim(),
					id:_this.id
					},
				extra = {
					
				};
				mui.addTitleView(viewOptions,extra);
			}
		})		
	})
	//添加likeStatus自定义事件监听
	window.addEventListener('likeStatus',function(event){
		if(plus.os.name=="iOS"){
			//重置refresh(true) 在ios中无法返回顶部，所以采用重新加载页面解决bug，后期修复
			var slef = plus.webview.currentWebview();
			slef.reload();
			return;
		}
		var userId = plus.storage.getItem('cg_user_id');
	  	myAjax('home/snapshot/index','post',{userid:userId},function(e){
	  		//console.log('index:'+JSON.stringify(e));
			e = JSON.parse(e);
			if(e.code == '1'){
				e.baseUrl = _baseUrl;
			var	leftHtml = template('leftTpl',e),
				rightHtml = template('rightTpl',e);
				$('.waterfall-left').empty().append(leftHtml);
				$('.waterfall-right').empty().append(rightHtml);
			}
		});
		mui('#container').pullRefresh().enablePullupToRefresh();
		mui('#container').pullRefresh().refresh(true);	
	});
</script>
</html>
